import React, { useEffect } from "react";
import { Avatar, Divider, Form, Row, Col, Input, Upload, Button } from 'antd';
import styles from './Setting.less';

const FormItem = Form.Item;

const PersonTabPane = (props) => {

    const { themeColor, currentUser, onCacheUser, onSaveUser } = props;

    const [form] = Form.useForm();
    const { getFieldsValue, validateFields, setFieldsValue, resetFields } = form;

    useEffect(() => {
        setFieldsValue(currentUser);
    }, [currentUser]);

    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    const singleFormItemLayout = {
        labelCol: { span: 3 },
        wrapperCol: { span: 21 },
    };

    const uploadProps = {
        name: "PictureToolBar",
        listType: "picture-card",
        className: "avatar-uploader",
        showUploadList: false,
        beforeUpload: (file) => {
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function (event) {
                let base64 = event.target.result;
                currentUser.photo = base64;
                onCacheUser(currentUser);
            }
        },
    }

    const uploadButton = (
        <div>
            <i className={"ri-user-line"} style={{ fontSize: 24 }} />
            <div style={{ marginTop: 0 }}>上传头像</div>
        </div>
    )

    const saveEditUser = () => {
        validateFields().then(values => {
            onSaveUser({ ...currentUser, ...values });
        }).catch(error => {
            const errors = error.errorFields;
            for (let i = 0; i < errors.length; i++) {
                console.log("PersonTabPane Error => " + errors[i].name[0] + " ===>>> " + errors[i].errors[0]);
            }
        });
    }

    return (
        <div style={{ display: "block", padding: "8px 20px 0px 10px",  }}>
            <i className="ri-file-text-line" style={{ marginRight: "10px" }} />个人资料
            <Divider />
            <div id={"userInformation"} style={{ display: "flex", flexDirection: "row" }}>
                <div style={{ flex: 1 }}>
                    <div style={{ textAlign: "center", marginBottom: "5px" }}>
                        <Avatar shape="square" size={80} src={currentUser?.photo} icon={<i className={"ri-user-line"} />} />
                    </div>
                    <div style={{ lineHeight: "3", padding: "20px 0px 0px 0px" }}>
                        <div>
                            <span><i className={"ri-user-line"} />&nbsp;登录名称：</span>
                            <span className={styles.personInfoSpan}>{currentUser?.user_name}</span>
                        </div>
                        <div>
                            <span><i className={"ri-cellphone-line"} />&nbsp;手机号码：</span>
                            <span className={styles.personInfoSpan}>{currentUser?.phone_number}</span>
                        </div>
                        <div>
                            <span><i className={"ri-mail-line"} />&nbsp;邮箱地址：</span>
                            <span className={styles.personInfoSpan}>{currentUser?.email}</span>
                        </div>
                        <div>
                            <span><i className={"ri-time-line"} />&nbsp;创建时间：</span>
                            <span className={styles.personInfoSpan}>{currentUser?.create_time}</span>
                        </div>
                    </div>
                    <Divider />
                    <div>
                        <div><i className={"ri-book-open-line"} />&nbsp;个人简介：</div>
                        <div className={styles.user_info_resume}>{currentUser?.resume}</div>
                    </div>
                </div>
                <div style={{ flex: 1.6 }}>
                    <Form form={form} style={{ margin: "5px 0px 0px 50px", lineHeight: 5 }}>
                        <Row>
                            <Col span={12}>
                                <Row>
                                    <Col span={24}>
                                        <FormItem {...formItemLayout} label="用户名称" name={"user_name"}
                                                  rules={[{required: true, message: '请输入用户名称'}]}>
                                            <Input placeholder={"请输入用户名称"} disabled={"disabled"}/>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span={24}>
                                        <FormItem {...formItemLayout} label="手机号码" name={"phone_number"}
                                                  rules={[{required: true, message: '请输入手机号码'}]}>
                                            <Input placeholder={"请输入手机号码"}/>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="照片头像" name={"photo"}
                                          rules={[{required: true, message: '请输入用户名'}]}>
                                    <Upload {...uploadProps} className={styles.uploadDiv}>
                                        {
                                            currentUser?.photo ?
                                                <img src={currentUser?.photo} alt="avatar" style={{ height: 86 }} /> : uploadButton
                                        }
                                    </Upload>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="邮箱地址" name={"email"}
                                          rules={[{required: true, message: '请输入用户名'}]}>
                                    <Input placeholder={"请输入用户名"}/>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="旧密码" name={"password"}
                                          rules={[{required: true, message: '请输入旧密码'}]}>
                                    <Input placeholder={"请输入旧密码"}/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="新密码" name={"newPassword"}
                                          rules={[{required: true, message: '请输入新密码'}]}>
                                    <Input placeholder={"请输入新密码"}/>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="确认密码" name={"newPassword"}
                                          rules={[{required: true, message: '请输入确认密码'}]}>
                                    <Input placeholder={"请输入确认密码"}/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem {...singleFormItemLayout} label="个人简介" name={"resume"} rules={[{required: false}]}>
                                    <Input.TextArea placeholder={"请输入个人简介，最长500个字"} style={{ height: 150 }} />
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <div style={{textAlign: "center"}}>
                        <Button icon={<i className="ri-save-3-line" />} style={{ background: themeColor }} onClick={() => saveEditUser(currentUser)}>保存</Button>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default PersonTabPane;
